<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      ul{
        list-style: none;
      }
      li{
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <ul>
        <li @click="handleClick(1,$event)">第一个li</li>
        <li @click="handleClick(2,$event)">第二个li</li>
        <li @click="handleClick(3,$event)">第三个li</li>
      </ul>
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
      var vm = new Vue({
        el: "#app",
        data: {},
        methods: {
          handleClick: function (num, e) {
            e.target.style.background =
              num == 1 ? "red" : num == 2 ? "blue" : "green";
          },
        },
      });
      
    </script>
  </body>
</html>
